﻿<%@ Page Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="TreeViewButton.aspx.cs" Inherits="YUIAspNetDemo.Button.TreeViewButton" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : Button : TreeView Button</title>
    <script type="text/javascript">
        function NodeClick(sender, args)
        {
            //get the button
            var btn = $find('<%= btnMnu.ClientID %>');
            
            HandleNodeClick(btn, sender, args);
        }
        
         function NodeClick2(sender, args)
        {
            //get the button
            var btn = $find('<%= btnSplit.ClientID %>');
            
            HandleNodeClick(btn, sender, args);
        }
        
        function HandleNodeClick(parentButton, tree, args)
        {
            parentButton.get_YUIControl().set("label", "selected");
            parentButton.get_Overlay().hide();
            
            var path='';
            var pathParts = [];
            
            var tmpNode = args.node;
            
            while(tmpNode)
            {
                if(tmpNode.label)
                    pathParts.push(tmpNode.label);
                
                tmpNode = tmpNode.parent;
            }
            
            //reverse array...
            var reversed = [];
            for(var idx = pathParts.length - 1; idx >= 0; idx--)
                 reversed.push(pathParts[idx]);
            
            parentButton.get_YUIControl().set("label", reversed.join("\\"));
        }
    </script>
    
    <style type="text/css">
        /*fix in IE, display drop-down calendar container on top of second button*/
        .yui-overlay {z-index:1; background-color:white; border:solid 1px #000}
        .yuimenu {}
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Multi select button</h1>
    
    <p>This sample uses YUIAsp.Net OverlayButton control with menu/split display with a tree view, which simulates a folder/item selection.</p>
        
    <h1>TreeView button using menu button</h1>
    <p>
        <yui:OverlayButton ButtonType="Menu" ID="btnMnu" Text="Choose a path..." runat="server" OverlayHeight="200" OverlayWidth="300">
            <OverlayTemplate>
                <yui:TreeView ID="tree1" runat="server" ThemeName="Folder" OnClientNodeClick="NodeClick">
                    <Nodes>
                        <yui:TreeNode Text="C:">
                            <Nodes>
                                <yui:TreeNode Text="Windows"></yui:TreeNode>
                                <yui:TreeNode Text="Program Files"></yui:TreeNode>
                                <yui:TreeNode Text="Documents and Settings">
                                    <Nodes>
                                        <yui:TreeNode Text="Raul"></yui:TreeNode>
                                    </Nodes>
                                </yui:TreeNode>
                            </Nodes>
                        </yui:TreeNode>
                        
                        <yui:TreeNode Text="D:">
                            <Nodes>
                                <yui:TreeNode Text="Pics"></yui:TreeNode>
                                <yui:TreeNode Text="Games"></yui:TreeNode>
                            </Nodes>
                        </yui:TreeNode>
                    </Nodes>
                </yui:TreeView>
            </OverlayTemplate>
        </yui:OverlayButton>
        <asp:HiddenField ID="hidMenu" runat="server" />
    </p>
    
    <h1>TreeView button using split button</h1>
    <p>
         <yui:OverlayButton ButtonType="Split" ID="btnSplit" Text="Choose a path..." runat="server" OverlayHeight="200" OverlayWidth="300">
            <OverlayTemplate>
                <yui:TreeView ID="tree1" runat="server" ThemeName="Folder" OnClientNodeClick="NodeClick2">
                    <Nodes>
                        <yui:TreeNode Text="C:">
                            <Nodes>
                                <yui:TreeNode Text="Windows"></yui:TreeNode>
                                <yui:TreeNode Text="Program Files"></yui:TreeNode>
                                <yui:TreeNode Text="Documents and Settings">
                                    <Nodes>
                                        <yui:TreeNode Text="Raul"></yui:TreeNode>
                                    </Nodes>
                                </yui:TreeNode>
                            </Nodes>
                        </yui:TreeNode>
                        
                        <yui:TreeNode Text="D:">
                            <Nodes>
                                <yui:TreeNode Text="Pics"></yui:TreeNode>
                                <yui:TreeNode Text="Games"></yui:TreeNode>
                            </Nodes>
                        </yui:TreeNode>
                    </Nodes>
                </yui:TreeView>
            </OverlayTemplate>
        </yui:OverlayButton>
    </p>
</asp:Content>

